<template>
	<!-- 生产报工主页面 -->
	<PageWrap :workline="worklineObj">
		<view class="content">
			<view class="tab-content">
				<view class="tabs">
				
					<view v-for="(item, index) in dynamicTabList"
						:class="['tabs-item', item.key === data_index ? 'active' : '']" :key="index"
						@click="tablistClick(item)">
						{{ item.value }}
					</view>
				</view>
				<view class="tab-list">
				
					<report ref="report" v-if="data_index == 'report'" :worklineObj="worklineObj"
						@tabsChange="tabsChange"></report>
					<!-- 工单信息 -->
					<queue @custom-event="receiveFromChild" v-if="data_index === 'queue'" :workorder='worklineObj'>
					</queue>
					<!-- 工艺要求 -->
					<params ref="params" v-if="data_index == 'params'" :paramsList="paramsList" :workorder='worklineObj'
						:workLineDetail="workLineDetail" :workstatList="workstatList"></params>
				</view>
				<u-toast ref="uToast" />
			</view>
		</view>
	</PageWrap>
</template>

<script>
	import params from "./params.vue";
	import queue from "./queue.vue";
	import report from "./report.vue";
	import PageWrap from "../components/page-wrap/index.vue";

	export default {
		components: {
			params,
			queue,
			report,
			PageWrap,
		},
		computed: {
			dynamicTabList() {
				// 获取当前工序（这里需要根据您的实际情况获取）
				const currentProcess = this.worklineObj.processName; // 假设这是您存储当前工序的变量

				// 根据工序返回不同的tabList
				return [{
						value: "生产报工",
						key: "report",
					},
					{
						value: this.getQueueNameByProcess(currentProcess),
						key: "queue"
					}
				];
			},
		},

		data() {
			return {
				data_index: "queue",
				data_queue: false,


				processCode: '',
				processId: '',
				workstationId: '',
				workstatList: [],

				workorder: {},
				taskId: '',
				showImage: true,
				// 当前产线
				worklineObj: null,
				// 生产订单
				workLineDetail: null,
				// 工艺要求
				paramsList: [],
				// 作业指导文件
				bomList: [],
				// 配方数据
				itemList: [],
				// 物料位置字典
				ruleList: []
			};
		},
		
		async onLoad(option) {
			const val = JSON.parse(option.processData)
			console.log('工序数据', val)
			this.worklineObj = val



		},

		methods: {


			// =================================
			// 根据工序获取队列名称的方法
			getQueueNameByProcess(process) {
				// 这里定义工序与名称的映射关系
				const nameMap = {
					'振动成型': '已报工',
					'养护': '已组盘',
					'脱模精整': '已拆盘',
					'热处理': '已组盘',
					'包装': '已拆盘',

					// 添加更多工序映射...
				};

				return nameMap[process] || '已报工'; // 如果没有匹配，返回默认值
			},
			// 方法中可以这样使用
			isProcess(process) {
				return this.worklineObj && this.worklineObj.processName === process;
			},
			// 下拉刷新
			onPullDownRefresh() {

				this.$forceUpdate();
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1500)
			},
			// 跳转发布工单tab
			tabsChange(value) {

				this.data_index = "queue"

				// this.getQueueList()
			},

			// 获取工艺的详细信息
			getRouteRequestByBomId() {

				this.$u.api.getRouteRequestByBomId(this.workstatList[0].bomId).then(res => {
					console.log('获取工艺的详细信息', res)
					if (res.code == 200) {
						let arr1 = res.data.find(item => item.totel == "工艺要求")
						this.paramsList = arr1.date
						let arr2 = res.data.find(item => item.totel == "作业指导书")
						this.bomList = arr2.date
						let arr3 = res.data.find(item => item.totel == "混料工艺卡")
						this.itemList = arr3.date
					}
				});


			},


			tablistClick(item) {
				this.data_index = item.key
				if (item.key == 'report') {
					this.data_index = item.key
					// this.getReport()
				}
				if (item.key == 'params') {

					// this.getReport()
					this.data_index = item.key
				}
				if (item.key == 'queue') {
					// this.getQueueList()
					this.data_index = item.key
				}
			},
			receiveFromChild(e) {
				this.taskId = e
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		display: flex;
	}

	.tab-content {
		background: #fff;
		height: 100%;
		width: 100%;
		position: relative;

		.tabs {
			display: flex;
			position: relative;
			line-height: 40px;
			padding: 0 10px;
			font-size: 40rpx;
			// color: #f5f6f7;
			// background: #000;

			.tabs-item {
				padding: 0 20px;
				cursor: pointer;
				position: relative;

				&.active {
					color: #00aaff;
					z-index: 9;

					&::after {
						content: "";
						position: absolute;
						bottom: -1px;
						left: 0;
						right: 0;
						height: 2px;
						background: #ffaa00;
					}
				}
			}
		}

		.tab-list {
			position: absolute;
			top: 40px;
			width: 100%;
			bottom: 0;
			overflow: auto;
			// background: #000;
			// color: #f5f6f7;
			font-size: 12px;
		}
	}
</style>